<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib  uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!-- 
	首页图书列表
 -->
<!DOCTYPE html>
<html lang="zh">
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>简约书评网</title>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet"
	href="css/font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="css/pager.css">

<style type="text/css">
	.row > div {
		margin-bottom: 30px;
	}
</style>

</head>
<body>



<div class="container">

		<div class="page-header">
    <h4>最新图书
    </h4>
    <br>
</div>
	
	<c:forEach items="${requestScope.newestBooks}" var="book" varStatus="status">
		<c:if test="${(status.index%6)==0}"><div class="row"></c:if>
	
		<div class="col-md-2 col-sm-2 jQueryEqualHeight3">
			<div class="card">
				<img class="card-img-top " height="140px" src="${book.picture}" alt="Card image">
				 <div class="card-body">
					<h6 class="card-title"><a href="book/detail?bookId=${book.bookId}">
					<c:if test="${book.title.length() gt 6}">
					${fn:substring(book.title, 0, 6)}..
					</c:if>
					<c:if test="${book.title.length() le 6}">
					${book.title}
					</c:if>
					</a></h6>
				</div>
			</div>
		</div>
		<c:if test="${(status.index+1)%6==0 }"></div></c:if>
		<c:if test="${status.last}"></div></c:if>
	</c:forEach>
	<div class="page-header">
    <h4>高分推荐
    </h4>
    <br>
</div>
	<c:forEach items="${requestScope.newestBooks}" var="book" varStatus="status">
		<c:if test="${(status.index%6)==0}"><div class="row"></c:if>
	
		<div class="col-md-2 col-sm-2 jQueryEqualHeight3">
			<div class="card">
				<img class="card-img-top" height="140px" src="${book.picture}" alt="Card image">
				 <div class="card-body">
					<h6 class="card-title"><a href="book/detail?bookId=${book.bookId}">
					<c:if test="${book.title.length() gt 6}">
					${fn:substring(book.title, 0, 6)}..
					</c:if>
					<c:if test="${book.title.length() le 6}">
					${book.title}
					</c:if>
					</a></h6>
				</div>
			</div>
		</div>
		<c:if test="${(status.index+1)%6==0 }"></div></c:if>
		<c:if test="${status.last}"></div></c:if>
	</c:forEach>


</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-equal-height.min.js"></script>
<script type="text/javascript">
	function equal_height() {
		// Equal Card Height
		$('.jQueryEqualHeight1').jQueryEqualHeight();

		// Equal Card Height and Text Height
		$('.jQueryEqualHeight2').jQueryEqualHeight('.card .card-body .card-text');
		$('.jQueryEqualHeight2').jQueryEqualHeight('.card');

		// Equal Card Height, Text Height and Title Height
		$('.jQueryEqualHeight3').jQueryEqualHeight('.card .card-body .card-title');
		$('.jQueryEqualHeight3').jQueryEqualHeight('.card .card-body .card-text');
		$('.jQueryEqualHeight3').jQueryEqualHeight('.card');
	}
	$(window).on('load', function(event) {
		equal_height();
	});
	$(window).resize(function(event) {
		equal_height();
	});
</script>


</body>
</html>
